<!doctype html>
<html>

<head>
    <title>聊天室</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1">
    <link rel="stylesheet" href="/css/jquery.mCustomScrollbar.min.css">
    <link rel="stylesheet" href="/css/jquery.emoji.css">
    <link rel="stylesheet" href="/css/style.css">
</head>

<body>
    <div class="content">
        <div id="loginbox">
            <div style="width: 260px;margin: 200px auto;">
                输入你的昵称
                <br/>
                <br/>
                <input type="text" style="width:180px;" placeholder="请输入用户名" id="userName" name="userName" />
                <input type="button" style="width: 50px;" value="提交" onclick="CHAT.userNameSubmit();" id="login" />
            </div>
        </div>
        <div id="chatbox">
            <div class="msg_model">
                <div class="status">
                    <h1>聊天室</h1>
                </div>
                <div class="msg_list">
                    <ul id="cmessages"></ul>
                    <a href="javascript:;" class="bot_dom"></a>
                </div>
                <div class="input">
                    <div id="m" contenteditable="true"></div>
                    <label for="cupload" title="发送图片"><input type="file" id="cupload" style="display: none;" onchange="CHAT.getBse64Image(this);"></label>
                    <span><img id="emoji_btn" title="表情" src="" alt=""></span>
                    <button onclick="CHAT.submit();" title="发送" id="send">Send</button>
                </div>

                <!-- 私聊框 -->
                <div class="private_msg">
                    <div class="status">
                        <span class="return" onclick="CHAT.return()">返回</span>
                        <h1 id="private_name"></h1>
                    </div>
                    <div class="msg_list">
                        <ul id="pmessages"></ul>
                        <a href="javascript:;" class="bot_dom"></a>
                    </div>
                    <div class="input">
                        <div id="pm" contenteditable="true"></div>
                        <label for="pupload" title="发送图片"><input type="file" id="pupload" style="display: none;" onchange="CHAT.getBse64Image(this);"></label>
                        <span><img id="emoji_btn_p" src="" alt=""></span>                    
                        <button id="psend">Send</button>
                    </div>
                </div>
            </div>
            <div class="user_list">
                <div>当前在线<span class="counts"></span>人</div>
                <ul class="allUsers"></ul>
                <a class="loginout" href="javascript:;" onclick="CHAT.loginout();">退出</a>
            </div>
        </div>

    </div>
    <script src="/socket.io/socket.io.js"></script>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="/js/jquery.mousewheel-3.0.6.min.js"></script>
    <script src="/js/jquery.mCustomScrollbar.min.js"></script>
    <script src="/js/jquery.emoji.js"></script>
    <script src="/js/client.js"></script>
</body>

</html>